<template>
	<div>
		<el-container style="height: 100%;">
			<el-main style="padding: 0px">
				<el-card>
					<el-form :model="state.dataForm" :rules="state.dataRule" ref="dataFormRef">
						<v-form-render :form-json="state.formJson" :form-data="state.formData" :option-data="state.optionData" ref="vFormRef">
						</v-form-render>
					</el-form>
				</el-card>
				<el-card>
					<approveCommonFoot v-model:modelValue="state.taskParam" @refreshEmit="refreshEmit"
						@dataFormSubmit="dataFormSubmit" :isUpload="true" :disagreeShow="true"
						:taskId="state.dataForm.taskParam.taskId" :processId="state.dataForm.taskParam.processId" :businessKey="state.dataForm.taskParam.businessKey">
					</approveCommonFoot>
				</el-card>
			</el-main>
			<el-aside width="300px">
				<el-scrollbar>
					<approveHisDetailFoot :processId="state.dataForm.taskParam.processId"></approveHisDetailFoot>
				</el-scrollbar>
			</el-aside>
		</el-container>
	</div>
</template>
<script setup lang="ts" name="approveProcessCommon">
import { FormInstance } from 'element-plus'
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { developApi } from '/@/api/sys/develop-api'
import { post } from '/@/api/http'
import { TaskParam } from '/@/api/sys/workflow-api';

const route = useRoute()
const approveHisDetailFoot = defineAsyncComponent(() => import('./approveHisDetailFoot.vue'))
const approveCommonFoot = defineAsyncComponent(() => import('./approveCommonFoot.vue'))
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refreshDataList'])
const vFormRef = ref()
const dataFormRef = ref<FormInstance>()
const state = reactive({
	visible: false,	
	formData: {},
	optionData: {},
	customizeApi: '0',
	detailApiUrl: '',
	formJson:{"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
	dataForm: {
		taskParam: {
			processId: '',
			taskId: '',
			businessKey: '',
			description: '',
			approveAdvice: '',
			approveUserId: '',
		},
		designerId: '',
		designerCode: '',
		designerName: ''
	},
	taskParam: {} as TaskParam,
	dataRule: {}
})
// 页面加载时
onMounted(() => {
	console.log(route.query)
	state.dataForm.taskParam.processId = <string>route.query.insId
	state.dataForm.taskParam.taskId = <string>route.query.taskId
	state.dataForm.taskParam.businessKey = <string>route.query.businessKey
	developApi.getSysBusinessDesignerByCodeHasJson(<string>route.query.designerCode, '2').then((data) => {
		if (data && data.code === 0) {
			vFormRef.value.setFormJson(data.data.modFormJson)
			state.dataForm.designerId = data.data.id
			state.dataForm.designerCode = data.data.designerCode
			state.customizeApi = data.data.customizeApi
			state.detailApiUrl = data.data.detailApiUrl
			//加载业务数据
			if(state.customizeApi === '1'){
				post({
					url: state.detailApiUrl,
					data: state.dataForm
				}).then((data) => {
					if(data && data && data.code === 0){
						state.formData = data.data
						vFormRef.value.setFormData(JSON.parse(data.data.formData))
					}
				})
			}else{
				developApi.getSysBusinessCommonInfoById(<string>route.query.businessKey).then((data) => {
					if(data && data && data.code === 0){
						state.formData = JSON.parse(data.data.formData)
						vFormRef.value.setFormData(JSON.parse(data.data.formData))
					}
				})
			}
		}
	})
})
const dataFormSubmit = (taskParam: any) => {
}
const refreshEmit = () => {
	emit('refreshDataList')
}
</script>
<style scoped>
</style>